<template>
  <ul>
    <li v-for="item in tabList" :key="item.path" @click="clickTab(item.name)">
      <span :class="item.path == $route.path ? 'active' : ''">{{
        item.label
      }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Tab",
  props: ["tabList"],
  methods: {
    clickTab(name) {
      this.$router.push({
        name:name,
        query:{
          id:this.$route.query.id
        }
      });
    },
  }
};
</script>

<style lang="less" scoped>
ul {
  margin-left: 28px;
  display: flex;
  li {
    line-height: 50px;
    font-weight: lighter;
    font-size: 16px;
    margin-right: 20px;
    color: rgb(58, 57, 57);
    cursor: pointer;
  }
  li:hover {
    color: black;
  }
  .active {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 4px solid #ff7a9e;
  }
}
</style>